<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>请叫我【刘爱荣】</title>
		<link rel="stylesheet" href="../layui/css/layui.css">
	</head>
	<body>
		<ul class="layui-nav">
			<li class="layui-nav-item">
				<a href="">控制台<span class="layui-badge">9</span></a>
			</li>
			<li class="layui-nav-item">
				<a href="">个人中心<span class="layui-badge-dot"></span></a>
			</li>
			<li class="layui-nav-item">
				<a href=""><img src="../layui/images/icon/icon_face.png" class="layui-nav-img">请叫我【刘爱荣】</a>
				<dl class="layui-nav-child">
					<dd><a href="javascript:;">修改信息</a></dd>
					<dd><a href="javascript:;">安全管理</a></dd>
					<dd><a href="javascript:;">退了</a></dd>
				</dl>
			</li>
		</ul>

		<!-- <fieldset class="layui-elem-field">
			<legend>字段集区块 - 默认风格</legend>
			<div class="layui-field-box">
				内容区域
			</div>
		</fieldset>
		<blockquote class="layui-elem-quote">这个地方预留给美丽做备忘录的！</blockquote> -->

		<div class="layui-container">
			<blockquote class="layui-elem-quote">常规布局（以中型屏幕桌面为例）</blockquote>
			<div class="layui-row">
				<div class="layui-col-md9" style="background-color: red;">
					<form class="layui-form" action="">
						<div class="layui-form-item">

							<label class="layui-form-label">输入框</label>
							<div class="layui-input-block">
								<input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
									autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">密码框</label>
							<div class="layui-input-inline">
								<input type="password" name="password" required lay-verify="required"
									placeholder="请输入密码" autocomplete="off" class="layui-input">
							</div>
							<div class="layui-form-mid layui-word-aux">辅助文字</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">选择框</label>
							<div class="layui-input-block">
								<select name="city" lay-verify="required">
									<option value=""></option>
									<option value="0">北京</option>
									<option value="1">上海</option>
									<option value="2">广州</option>
									<option value="3">深圳</option>
									<option value="4">杭州</option>
								</select>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">复选框</label>
							<div class="layui-input-block">
								<input type="checkbox" name="like[write]" title="写作">
								<input type="checkbox" name="like[read]" title="阅读" checked>
								<input type="checkbox" name="like[dai]" title="发呆">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">开关</label>
							<div class="layui-input-block">
								<input type="checkbox" name="switch" lay-skin="switch">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">单选框</label>
							<div class="layui-input-block">
								<input type="radio" name="sex" value="男" title="男">
								<input type="radio" name="sex" value="女" title="女" checked>
							</div>
						</div>
						<div class="layui-form-item layui-form-text">
							<label class="layui-form-label">文本域</label>
							<div class="layui-input-block">
								<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
								<button type="reset" class="layui-btn layui-btn-primary">重置</button>
							</div>
						</div>
					</form>
				</div>
				<div class="layui-col-md3" style="background-color: orange;">
					<button type="button" class="layui-btn" id="upload_excel">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
				</div>
			</div>
		</div>
		<!-- 你的HTML代码 -->
		<script src="../layui/layui.js"></script>
		<script>
			// 页面加载完之后的渲染动作
			layui.use(['layer', 'form'], function() {
				var layer = layui.layer,
					form = layui.form;
				layer.msg('Hello World');
			});

			// form表单的动作绑定
			layui.use('form', function() {
				var form = layui.form;
				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});

			// 上传按钮的动作绑定
			layui.use('upload', function() {
				var upload = layui.upload;
				//执行实例
				var uploadInst = upload.render({
					// 绑定元素
					elem: '#upload_excel',
					// 上传接口
					url: '/upload/',
					done: function(res) {
						// 上传完毕回调
					},
					error: function() {
						// 请求异常回调
					}
				});
			});
		</script>
	</body>
</html>